<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建账户</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Inter', 'Noto Sans SC', sans-serif;
            background-color: #f8fafc;
        }
        
        .form-container {
            max-width: 400px;
            width: 100%;
            margin: 0 auto;
        }
        
        .input-field {
            transition: all 0.3s ease;
        }
        
        .input-field:focus {
            border-color: #165DFF;
            box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #165DFF 0%, #0e42d2 100%);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
        }
        
        .password-strength {
            height: 4px;
            transition: all 0.3s ease;
        }
        
        .error-message {
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease;
        }
        
        .error-message.show {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
    <div class="form-container bg-white rounded-xl shadow-lg p-8">
        <div class="text-center mb-8">
            <h1 class="text-2xl font-bold text-gray-800">创建账户</h1>
            <p class="text-gray-500 mt-2">填写以下信息完成注册</p>
        </div>
        
        <form id="registerForm" action="register.php" method="POST">
            <div class="mb-6">
                <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                <div class="relative">
                    <input type="text" id="username" name="username" 
                           class="input-field w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none"
                           placeholder="请输入4-16位用户名" required>
                    <div class="absolute right-3 top-3 text-gray-400">
                        <i class="fas fa-user"></i>
                    </div>
                </div>
                <div id="usernameError" class="error-message text-sm text-red-500 mt-1"></div>
            </div>
            
            <div class="mb-6">
                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                <div class="relative">
                    <input type="email" id="email" name="email" 
                           class="input-field w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none"
                           placeholder="请输入有效邮箱地址" required>
                    <div class="absolute right-3 top-3 text-gray-400">
                        <i class="fas fa-envelope"></i>
                    </div>
                </div>
                <div id="emailError" class="error-message text-sm text-red-500 mt-1"></div>
            </div>
            
            <div class="mb-6">
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                <div class="relative">
                    <input type="password" id="password" name="password" 
                           class="input-field w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none"
                           placeholder="请输入8-20位密码" required>
                    <div class="absolute right-3 top-3 text-gray-400">
                        <i class="fas fa-lock"></i>
                    </div>
                </div>
                <div class="flex mt-2 mb-1">
                    <div id="strengthBar1" class="password-strength w-1/4 bg-gray-200 rounded-l"></div>
                    <div id="strengthBar2" class="password-strength w-1/4 bg-gray-200"></div>
                    <div id="strengthBar3" class="password-strength w-1/4 bg-gray-200"></div>
                    <div id="strengthBar4" class="password-strength w-1/4 bg-gray-200 rounded-r"></div>
                </div>
                <div id="passwordError" class="error-message text-sm text-red-500"></div>
            </div>
            
            <div class="mb-6">
                <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                <div class="relative">
                    <input type="password" id="confirmPassword" name="confirmPassword" 
                           class="input-field w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none"
                           placeholder="请再次输入密码" required>
                    <div class="absolute right-3 top-3 text-gray-400">
                        <i class="fas fa-lock"></i>
                    </div>
                </div>
                <div id="confirmPasswordError" class="error-message text-sm text-red-500 mt-1"></div>
            </div>
            
            <button type="submit" class="btn-primary w-full py-3 rounded-lg text-white font-medium mb-6">
                注册
            </button>
            
            <div class="text-center text-sm text-gray-500">
                已有账号？<a href="index.html" class="text-blue-600 hover:underline">返回登录</a>
            </div>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('registerForm');
            const usernameInput = document.getElementById('username');
            const emailInput = document.getElementById('email');
            const passwordInput = document.getElementById('password');
            const confirmPasswordInput = document.getElementById('confirmPassword');
            
            // 密码强度指示器
            passwordInput.addEventListener('input', function() {
                const password = this.value;
                const strengthBars = [
                    document.getElementById('strengthBar1'),
                    document.getElementById('strengthBar2'),
                    document.getElementById('strengthBar3'),
                    document.getElementById('strengthBar4')
                ];
                
                // 重置所有强度条
                strengthBars.forEach(bar => {
                    bar.style.backgroundColor = '#e5e7eb';
                });
                
                // 计算密码强度
                let strength = 0;
                if (password.length >= 8) strength++;
                if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength++;
                if (password.match(/\d/)) strength++;
                if (password.match(/[^a-zA-Z\d]/)) strength++;
                
                // 更新强度条
                for (let i = 0; i < strength; i++) {
                    let color;
                    if (strength === 1) color = '#ef4444';
                    else if (strength === 2) color = '#f59e0b';
                    else if (strength === 3) color = '#3b82f6';
                    else color = '#10b981';
                    
                    strengthBars[i].style.backgroundColor = color;
                }
            });
            
            // 表单验证
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                let isValid = true;
                
                // 用户名验证
                const usernameError = document.getElementById('usernameError');
                if (usernameInput.value.length < 4 || usernameInput.value.length > 16) {
                    usernameError.textContent = '用户名长度应为4-16个字符';
                    usernameError.classList.add('show');
                    isValid = false;
                } else if (!/^[a-zA-Z0-9_]+$/.test(usernameInput.value)) {
                    usernameError.textContent = '用户名只能包含字母、数字和下划线';
                    usernameError.classList.add('show');
                    isValid = false;
                } else {
                    usernameError.classList.remove('show');
                }
                
                // 邮箱验证
                const emailError = document.getElementById('emailError');
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(emailInput.value)) {
                    emailError.textContent = '请输入有效的邮箱地址';
                    emailError.classList.add('show');
                    isValid = false;
                } else {
                    emailError.classList.remove('show');
                }
                
                // 密码验证
                const passwordError = document.getElementById('passwordError');
                if (passwordInput.value.length < 8 || passwordInput.value.length > 20) {
                    passwordError.textContent = '密码长度应为8-20个字符';
                    passwordError.classList.add('show');
                    isValid = false;
                } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/.test(passwordInput.value)) {
                    passwordError.textContent = '密码必须包含大小写字母、数字和特殊字符';
                    passwordError.classList.add('show');
                    isValid = false;
                } else {
                    passwordError.classList.remove('show');
                }
                
                // 确认密码验证
                const confirmPasswordError = document.getElementById('confirmPasswordError');
                if (passwordInput.value !== confirmPasswordInput.value) {
                    confirmPasswordError.textContent = '两次输入的密码不一致';
                    confirmPasswordError.classList.add('show');
                    isValid = false;
                } else {
                    confirmPasswordError.classList.remove('show');
                }
                
                if (isValid) {
                    const formData = new FormData(form);
                    
                    fetch(form.action, {
                        method: form.method,
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'error') {
                            // 显示后端返回的错误信息
                            if (data.errors.username) {
                                usernameError.textContent = data.errors.username;
                                usernameError.classList.add('show');
                            }
                            if (data.errors.email) {
                                emailError.textContent = data.errors.email;
                                emailError.classList.add('show');
                            }
                            if (data.errors.password) {
                                passwordError.textContent = data.errors.password;
                                passwordError.classList.add('show');
                            }
                            if (data.errors.confirmPassword) {
                                confirmPasswordError.textContent = data.errors.confirmPassword;
                                confirmPasswordError.classList.add('show');
                            }
                        } else {
                            // 注册成功，重定向到登录页
                            alert(data.message);
                            window.location.href = data.redirect;
                        }
                    })
                    .catch(error => {
                        console.error('注册请求失败:', error);
                        alert('注册过程中发生错误，请重试');
                    });
                }
            });
            
            // 输入时隐藏错误提示
            [usernameInput, emailInput, passwordInput, confirmPasswordInput].forEach(input => {
                input.addEventListener('input', function() {
                    const errorElement = document.getElementById(`${this.id}Error`);
                    if (errorElement) {
                        errorElement.classList.remove('show');
                    }
                });
            });
        });
    </script>
</body>
</html>
